<!DOCTYPE html>
<html>
<head>

    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    
    <title>Polyline Example</title>
    
    <link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" 
    	  rel="stylesheet" 
          type="text/css" />
          
    <!-- Google Maps API -->
    <script type="text/javascript" 
	 	src="http://maps.google.com/maps/api/js?v=3.5&sensor=false">
    </script>  
    
    <script type="text/javascript">
    
    
      // Karte initialisieren
      function initialize() {
        var myLatlng = new google.maps.LatLng(52.5234051,13.411399);
        
		// Kartenoptionen
		var myOptions = {
          zoom: 5,
          center: myLatlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        
        // Eckpunkte durch die die PolyLine führen soll
        var path = [
            new google.maps.LatLng(49.42562900000001, 7.746032000000014),
            new google.maps.LatLng(49.268862, 7.367486999999983),
            new google.maps.LatLng(49.2037161, 7.6047455000000355),
            new google.maps.LatLng(49.42562900000001, 7.746032000000014)
        ];
    
        // Polyline Objekt initialisieren
        var fhkl = new google.maps.Polyline({
			path: path,
			strokeColor: "#FF0000",
			strokeOpacity: 1.0,
			strokeWeight: 2
      	});
      
    	// Karte initialisieren
        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        
		// PolyLine auf der Karte platzieren
		fhkl.setMap(map);
      
      }
    </script>
    
</head>

<body onload="initialize()">
  	
    <!-- Kartendarstellung -->
    <div id="map_canvas">
    
    </div>
    
</body>

</html>
